iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 4
1
自我挑戰組

Swift - 來吧!鐵人三十項系列 第 4

Day04:好奇寶寶之來玩玩 SwiftUI - 基礎操作篇(1)

  • 分享至 

  • xImage
  •  

前前言

嗨,大家好,我是 Lacie,您現在收看的是 Swift - 來吧!鐵人三十項 系列的第四篇
在鐵人賽完結後,為保持持續做筆記的習慣
將會在我的 Medium 繼續撰寫文章,若有興趣者可前往觀看。


前言

由於我也是第一次接觸 SwiftUI,故想說先來熟悉一下基礎操作的部分。
現在國內外 SwiftUI 的文章及影片都沒有太多
若有興趣的人也可以參考以下連結進行學習:

彼得潘 / Appcoda-1 / Appcoda-2 / SwiftUI / Programming With Swift


學習 SwiftUI 的理由

優點:

  • 以更直覺、更精簡的方式來製作 UI 畫面
  • 即時預覽,讓你不用每次一直 build
  • 支援 iOS 13 的 dark mode

缺點:

  • iOS 13 以上才支援(公司產品為求穩定可能沒有那麼快拿來正式使用)
  • 由於還在 Beta 版,尚還在發展中,可能會有些 Bug,或者現在學的之後就改版了
  • 才釋出不久,相關文章、影片及教學都不多,甚至發問可能都沒人能回答
  • 用久了 UIKit,突然要重新學習新東西

新手要學哪一個?(UIKit vs SwiftUI)

兩個都要學


新增的特色

  1. 即時預覽

按下右上角的 Resume

即可產生即時預覽( Beta版可能要注意 Resume 的狀態,有時會壞掉沒有即時更新,要重按 )
下圖右下角的 1 為 Live Preview ,可使用動態預覽( 類似 Build 到模擬器上的效果 )
下圖右下角的 2 為 Preview on Device ( Build 到手機上 )

  1. 滾動軸

可點選或滾動,快速找到你想要修改的 code


修改元件的幾種方式

  1. 直接寫 code

  1. 點選想要修改的元件( 點程式碼或是即時預覽皆可 )從右側 Attributes inspector 設定

  1. 按 command 點選元件( 點程式碼或是即時預覽皆可 ),點選 Show SwiftUI Inspector 可彈出設定

  1. 按 control + option 點選元件( 點程式碼或是即時預覽皆可 ),直接彈出小型 Attributes inspector
  2. 從 Libiary 拉東西來用

Libiary 的變動

  • 右上角的+( Libiary )

  • 第一欄係跟 View 有關的一些元件

  • 第二欄係跟修改 View 有關的一些 Modifiers

  • 第三欄係 Code Snippets 被移進來了

  • 第四欄係媒體庫,在 Assets.xcassets 新增圖片後,可在這直接以拖拉方式產生 Image

  • 第五欄係顏色庫,在 Assets.xcassets 新增 Color Set 後,可在這以拖拉方式產生顏色的 code

下集待續 ...


上一篇
Day03:好奇寶寶之來玩玩 SwiftUI - 前置作業
下一篇
Day05:好奇寶寶之來玩玩 SwiftUI - 基礎操作篇(2)
系列文
Swift - 來吧!鐵人三十項30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 則留言

0
ytyubox
iT邦新手 5 級 ‧ 2019-09-19 16:37:47

優缺點的部分跟我的想法有點出入, 分享給你:

優點:

支援 iOS 13 的 dark mode // StoryBoard 也可以支援 Dark mode
優點補充: UI 設計的 "版本衝突" 機會減少許多

缺點:

iOS 13 以上才支援(公司產品為求穩定可能沒有那麼快拿來正式使用) //公司會拿來使用, 但是需要使用 @available(iOS 13.0)

我要留言

立即登入留言